<template>
	<view class="y-flex pt-30 pb-20 pl-30 pr-30">
		<view class="y-flex border-bottom-1 border-bottom-style-dashed pb-30" :style="{'border-bottom-color': skinColor.color_gap_1}">
			<view class="y-flex mb-20" :class="{'y-align-center': coverWidth}">
				<find-image
				enable-preview
				:border-radius="coverBorderRadius"
				:style="{
					'width': coverWidth ? pixelunit(coverWidth) : 'auto',
					'height': coverHeight ? pixelunit(coverHeight) : 'auto'
				}"
				:src="data.cover" :mode="coverMode" v-if="data.cover"></find-image>
			</view>
			<view class="y-flex y-align-center">
				<text class="fs-40" :style="{color: skinColor.color_1}">{{data.title}}</text>
				<text class="fs-28 mt-20" :style="{color: skinColor.color_3}">{{data.subtitle}}</text>
			</view>
			<view class="y-flex y-row y-align-center mt-30" v-if="enableButton">
				<template v-if="record.id">
					<com-button class="y-flex-1" type="warning" :value="options.continueText" @click="continueClick"></com-button>
					<com-gap width="30rpx"></com-gap>
				</template>
				<com-button class="y-flex-1" type="primary" :value="options.startText" @click="startClick"></com-button>
			</view>
			<view class="y-flex y-row y-align-center mt-30" v-if="record.currentTitle">
				<text class="fs-28" :style="{color: skinColor.color_1}">{{options.recordText}}：</text>
				<text class="fs-28" :style="{color: skinColor.color_3}">{{record.currentTitle}}</text>
			</view>
		</view>
		<com-read-more class="mt-30" :shadow-color="bgColor" v-if="data.description">
			<text class="fs-32" selectable :style="{color: skinColor.color_1}">{{data.description}}</text>
		</com-read-more>
		<mp-html class="mt-30" :copy-link="false" :content="content" @linktap="handleLinkTap" v-if="content"></mp-html>
		<scroll-view class="y-flex y-row y-align-center mt-20" :show-scrollbar="false" scroll-x v-if="data.tags">
			<com-tag class="mr-20" type="" v-for="(item, index) in data.tags" :key="index" :bg-color="themeColor" :value="item.title" plain @click="handleTagTap(item)"></com-tag>
		</scroll-view>
		<com-grid class="mt-20" :data="data.images"
		v-if="data.images && data.images.length > 0"
		:column="3">
			<template v-slot="data">
				<find-image :src="data.item"
				border-radius="10"
				tip-size="20"
				:style="{'height': '190rpx'}" enable-preview class="y-flex-1" mode="aspectFill"></find-image>
			</template>
		</com-grid>
		<view class="position-relative bg-000 mt-20" style="height: 400rpx;" v-if="data.video && data.video.src">
			<view class="y-flex y-flex-1"
			v-if="videoInit">
				<find-list-video
				class="y-flex-1"
				ref="video"
				autoplay
				:src="data.video.src"
				:poster="data.video.poster"
				:title="data.video.title || data.title"
				:type="data.video.type"
				:is-live="data.video.isLive"
				@download="handleDownload"
				@destroyed="handleDestroyed"></find-list-video>
			</view>
			<template v-else>
				<find-image
				v-if="data.video.cover"
				:src="data.video.cover"
				class="position-absolute-cover" mode="aspectFill"></find-image>
				<view class="position-absolute-cover y-flex y-align-center y-justify-center">
					<view class="t-cell-video-play pt-20 pb-20 pl-40 pr-40 bg-dark-mask border-radius-15" @tap="initVideo">
						<com-icon name="play_fill" size="40rpx" color="#fff"></com-icon>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import { openDB, closeDB, select, insert, remove } from '@/assets/database'
	import FindListVideo from '../ListVideo.vue'
	import FindImage from '../Image.vue'
	export default {
		inject: ['getPageStyle', 'getSkinColor', 'navigate', 'download', 'sharePoster', 'toast'],
		components: {FindListVideo, FindImage},
		props: {
			data: {
				type: Object,
				default: () => ({})
			},
			options: {
				type: Object,
				default: () => ({})
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			pageStyle () {
				return this.getPageStyle()
			},
			coverWidth () {
				return ['number', 'string'].includes(typeof this.pageStyle.coverWidth) ? this.pageStyle.coverWidth : 171
			},
			coverHeight () {
				return ['number', 'string'].includes(typeof this.pageStyle.coverHeight) ? this.pageStyle.coverHeight : 242
			},
			coverMode () {
				return this.pageStyle.coverMode || 'aspectFill'
			},
			coverBorderRadius () {
				return ['number', 'string'].includes(typeof this.pageStyle.coverBorderRadius) ? this.pageStyle.coverBorderRadius : 15
			},
			enableButton () {
				return this.options.enableButton == 0 ? false : true
			},
			content () {
				return this.data.content ? `<div style="color: ${this.skinColor.color_1}">` + this.data.content + '</div>' : ''
			},
			//主题色
			themeColor () {
				return this.pageStyle.themeColor || this.skinColor.color_theme_1
			},
			pixelunit () {
				return pixelunit
			}
		},
		data () {
			return {
				videoInit: false,
				record: {}
			}
		},
		methods: {
			handleTagTap (item) {
				this.navigate(item.url)
			},
			handleLinkTap (e) {
				this.navigate(e.href)
			},
			handleDownload (item) {
				this.download({...item,
					isAdult: this.item.isAdult
				})
			},
			handleDestroyed () {
				this.videoInit = false
			},
			initVideo () {
				this.videoInit = true
			},
			continueClick () {
				this.$emit('continueClick', this.record)
			},
			startClick () {
				this.$emit('startClick')
			},
			async getRecord () {
				const uniqueId = this.data.uniqueId
				if ( !uniqueId ) return
				try{
					await openDB()
					const data1 = await select('record', 'unique_id = "' + uniqueId + '"')
					this.record = data1.list[0] || {}
					const data2 = await select('collection', 'unique_id = "' + uniqueId + '"')
					const utils = [{
						label: data2.count > 0 ? '已收藏' : '点击收藏',
						icon: data2.count > 0 ? 'favor_fill' : 'favor',
						color: data2.count > 0 ? this.skinColor.color_red : '',
						func: async () => {
							try{
								await openDB()
								if ( data2.count > 0 ) {
									await remove('collection', 'id = ' + data2.list[0].id)
									this.toast('取消收藏成功')
									await closeDB()
									this.getRecord()
								} else {
									const params = {
										unique_id: uniqueId,
										url: this.data.url,
										title: this.data.title || '',
										cover: this.data.cover || '',
										is_adult: this.data.isAdult || 0,
										source_id: this.data.sourceId
									}
									await insert('collection', params)
									this.toast('收藏成功')
									await closeDB()
									this.getRecord()
								}
							}catch(e){
								closeDB()
								this.toast(e.message)
							}
						}
					}]
					if ( this.data.shareUrl && this.data.title ) {
						utils.push({
							label: '分享资源',
							icon: 'forward',
							func: () => {
								this.sharePoster(this.data)
							}
						})
					}
					this.$emit('utils', utils)
				}catch(e){
					this.toast(e.message)
				}
				closeDB()
			}
		}
	}
</script>

<style>
</style>